<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>创建节点-应用实例</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }
    div.mini {
      width: 30px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }
  </style>
  <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#b1").click(function (){
        var cq_li = document.createElement("li");
        cq_li.setAttribute("name","chongqing")
        cq_li.setAttribute("id","cq")
        cq_li.innerText="重庆"
        var elementById = document.getElementById("sh").append(cq_li);
      })

      $("#b2").click(function (){
       var $cq = $("<li id=\"cq\" name=\"chongqing\">重庆</li>");
       // $("#sh").after($cq)
       ($cq).insertAfter($("#sh"))
      })

      $("#b3").click(function (){
        var $cd= $("<li id=\"cd\" name=\"chengdu\">成都</li>");
        // $("#bj").before($cd)

        ($cd).insertBefore($("#bj"))
      })
      $("#b4").click(function (){
        var $cd= $("<li id=\"cd\" name=\"chengdu\">成都</li>");
        $("#bj").after($cd)

      })
      $("#b5").click(function (){
        var $cd= $("<li id=\"cd\" name=\"chengdu\">成都</li>");
        $("#jl").before($cd)
      })

    })
  </script>
</head>
<body>
<ul id="city">
  <li id="bj" name="beijing">北京</li>
  <li id="sh" name="shanghai">上海</li>
  <li id="jl" name="jilin">吉林</li>
  <li id="my" name="mianyang">绵阳</li>
</ul>
<input type="button" id="b1"  value="添加重庆 li 到 上海下(使用 dom 的传统方
法)"/><br/><br/>
<input type="button" id="b2" value="添加重庆 li 到 上海下"/><br/><br/>
<input type="button" id="b3" value="添加成都 li 到 北京前"/><br/><br/>
<input type="button" id="b4" value="添加成都 li 到 北京和重庆之间"/><br/><br/>
<input type="button" id="b5" value="添加成都 li 到 吉林前面"/><br/>
</body>
</html>